import { createVNode, render, FunctionalComponent, ref } from 'vue';
import './index.module.scss';


interface Props {
    show: boolean,
    text: string
}

type MakeKeysOptional<T, K extends keyof T> = { [P in K]?: T[P] } & {
    [P in Exclude<keyof T, K>]: T[P];
};


const layoutLoadingComponent: FunctionalComponent<Props> = ({ text = '加载中...', show = true }) => {
    return (
        show && <div class="dv-loading" >
            <svg width="50px" height="50px" v-show={text === '加载中...'}>
                <circle
                    cx="25"
                    cy="25"
                    r="20"
                    fill="transparent"
                    stroke-width="3"
                    stroke-dasharray="31.415 31.415"
                    stroke="#02bcfe"
                    stroke-linecap="round"
                >
                    <animateTransform
                        attributeName="transform"
                        type="rotate"
                        values="0, 25 25;360, 25 25"
                        dur="1.5s"
                        repeatCount="indefinite"
                    />
                    <animate
                        attributeName="stroke"
                        values="#02bcfe;#3be6cb;#02bcfe"
                        dur="3s"
                        repeatCount="indefinite"
                    />
                </circle>

                <circle
                    cx="25"
                    cy="25"
                    r="10"
                    fill="transparent"
                    stroke-width="3"
                    stroke-dasharray="15.7 15.7"
                    stroke="#3be6cb"
                    stroke-linecap="round"
                >
                    <animateTransform
                        attributeName="transform"
                        type="rotate"
                        values="360, 25 25;0, 25 25"
                        dur="1.5s"
                        repeatCount="indefinite"
                    />
                    <animate
                        attributeName="stroke"
                        values="#3be6cb;#02bcfe;#3be6cb"
                        dur="3s"
                        repeatCount="indefinite"
                    />
                </circle>
            </svg>
            <div class="loading-tip">
                {text}
            </div>
        </div>
    )
}

export default function layoutLoading({ el, show, text }: MakeKeysOptional<Props & { el: HTMLElement }, "show" | "text">) {
    let moduleLoading = ref<boolean>(false);
    let dom = (() => el) as any;
    let app = createVNode(layoutLoadingComponent, { show, text })
    if (el) {
        render(app, el)
    }

    return {
        close() {
            dom() && render(createVNode(layoutLoadingComponent, { show: false }), dom())
            dom = null;
            moduleLoading.value = true
        },
        error(text:string){
            dom() && render(createVNode(layoutLoadingComponent, { show: true ,text}), dom())
            dom = null;
        },
        moduleLoading,
    }
}
